<template>
	<div class="tip-main-box">

		<div class="tip-box">
			<image class="close" mode="widthFix"
				src="https://qiming-1308147483.cos.ap-chengdu.myqcloud.com/doc%2Fpinzhi_shenghuo_huiyuan_quanyi%2Fcommon%2Fclose.png"
				@click="close"></image>

			<div class="tip-title">{{ title }}</div>
			<div class="tip-sub-title">{{ subTitle }}</div>
			<image mode="widthFix" class="icon" :src="icon" alt="" @click="close"></image>
			<div class="btn" @click="success">{{btnText}}</div>
		</div>
	</div>
</template>

<script setup>
	const props = defineProps(['title', 'subTitle', 'icon', 'value', 'btnText'])
	const emit = defineEmits(['success', 'close'])
	const success = () => {
		emit('success', props.value)
	}
	const close = () => {
		emit('close')
	}
</script>

<style lang="scss" scoped>
	.tip-main-box {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		background: url("https://qiming-1308147483.cos.ap-chengdu.myqcloud.com/doc%2Fpinzhi_shenghuo_huiyuan_quanyi%2Fmy-coupon%2Fconfirm-receive-bg.png") no-repeat;
		background-size: 100% 100%;
		z-index: 2;

		.tip-box {
			border-radius: 20rpx;
			padding: 25rpx 0;
			width: 90%;
			margin: 0 auto;
			box-sizing: border-box;
			position: relative;
			text-align: center;

			.close {
				position: absolute;
				right: 0;
				top: -80rpx;
				width: 50rpx;
			}

			.tip-title {
				text-align: center;
				font-size: 42rpx;
				font-weight: 600;
				letter-spacing: 1rpx;
				color: #fde3bd;
			}

			.tip-sub-title {
				font-size: 28rpx;
				letter-spacing: 1rpx;
				color: #fde3bd;
				margin-top: 15rpx;
				text-align: center;
			}

			.icon {
				display: block;
				width: 200rpx;
				margin: 15rpx auto 0;
			}

			.btn {
				width: 300rpx;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				background-image: linear-gradient(to bottom, #d65153, #9e0e11);
				border-radius: 40rpx;
				font-size: 30rpx;
				font-weight: 600;
				letter-spacing: 15rpx;
				color: #ffffff;
				margin: 30rpx auto 0;
			}
		}
	}
</style>